<template>
  <view class="notice-container">
    <view class="notice-list" v-if="!showDetail">
      <view v-for="(item, idx) in notices" :key="idx" class="notice-item" @click="openDetail(idx)">
        <text class="notice-title">{{ item.title }}</text>
        <text class="notice-date">{{ item.date }}</text>
      </view>
    </view>
    <view class="notice-detail" v-else>
      <view class="detail-header">
        <text class="back-btn" @click="showDetail = false">← 返回</text>
        <text class="detail-title">{{ notices[selectedIndex].title }}</text>
      </view>
      <view class="detail-content">
        <text>{{ notices[selectedIndex].content }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const notices = ref([
  {
    title: 'AI音乐生成隐私声明',
    date: '2024-05-01',
    content: '音乐是AI根据你的照片状态生成的，我们不会保存你的图片。'
  },
  {
    title: '新功能上线',
    date: '2024-04-28',
    content: '我们上线了全新的AI音乐推荐功能，欢迎体验！'
  },
  {
    title: '版本更新公告',
    date: '2024-04-20',
    content: '应用已升级至v1.1.0，修复了若干已知问题，提升了体验。'
  }
])
const showDetail = ref(false)
const selectedIndex = ref(0)

const openDetail = (idx) => {
  selectedIndex.value = idx
  showDetail.value = true
}
</script>

<style lang="scss" scoped>
.notice-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%);
  padding: 40rpx 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.notice-list {
  width: 92vw;
  max-width: 600px;
  margin: 0 auto;
}
.notice-item {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 32rpx 28rpx 24rpx 28rpx;
  margin-bottom: 28rpx;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.2s;
  &:active {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  }
}
.notice-title {
  font-size: 1.18rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}
.notice-date {
  font-size: 0.92rem;
  color: #999;
}
.notice-detail {
  width: 92vw;
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 36rpx 32rpx 32rpx 32rpx;
  margin-top: 30rpx;
}
.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}
.back-btn {
  color: #007bff;
  font-size: 1.1rem;
  margin-right: 18rpx;
  cursor: pointer;
}
.detail-title {
  font-size: 1.18rem;
  font-weight: bold;
  color: #333;
}
.detail-content {
  font-size: 1.05rem;
  color: #444;
  margin-top: 18rpx;
  line-height: 1.8;
}
</style> 